<template>
	<view class="KoiNode">
		<navBar><template #title>锦鲤合伙人</template></navBar>
		<view class="secureCase">
			<view class="list">
				<template v-for='item in list'>
					<view :class="item.isIssue==='进行中'?'item':'item Issued'" @click="toKoiNodePro(item)">
						<view class="topText">
							{{item.isIssue}}
						</view>
						<view class="period">
							<text>第{{item.id}}期</text>
						</view>
						<view class="gainsDate">
							<view class="Gains">{{item.Gains}}</view>
							<view class="date">{{item.date}}</view>
						</view>
						<view class="schedule" v-if="item.isIssue==='进行中'">
							<van-progress :percentage="item.progress" :show-pivot='false' stroke-width='4px' />
						</view>
					</view>
				</template>
			</view>
		</view>
		<Footer>
			<template #btn>
				<van-button plain hairline type="primary" class="btn" @click="inkoiNode">申请成为黑金节点</van-button>
			</template>
		</Footer>
	</view>
</template>

<script setup lang='ts'>
	import { ref } from 'vue'
	import navBar from '@/components/mine/navBar/index.vue'
	import Footer from '../../components/Home/footer/index.vue'
	import { koiPartner } from '@/api/home'
	import { onShow } from '@dcloudio/uni-app'
	const list = ref([])
	// 获取周期列表
	onShow(async () => {
		var {
			rows
		} = await koiPartner()
		list.value = rows
	})
	// 
	const toKoiNodePro = (n: number) => {
		uni.navigateTo({
			url: '/homeSub/KoiNodePro/index?item=' + JSON.stringify(n)
		})
	}

	const inkoiNode = () => {
		uni.navigateTo({
			url: '/homeSub/becomeKoiNode/index'
		})
	}
</script>

<style scoped lang="scss">
	.KoiNode {
		position: relative;
		min-height: 100vh;

		.list {
			width: 100%;
			margin-bottom: 100px;

			.item {
				position: relative;
				height: 292px;
				margin-bottom: 38px;
				padding: 20px;
				box-sizing: border-box;
				background: url('/static/images/Home/card-gold.png') no-repeat;
				background-size: 100% 100%;
				color: white;
				border-radius: 36px;
				box-shadow: 0px 8px 8px white;

				&:last-child {
					margin-bottom: 0;
				}

				// 进行中状态
				.topText {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 1px;
					right: 0;
					width: 140px;
					height: 48px;
					background: linear-gradient(90deg, #14D081 0%, rgba(20, 208, 129, 0) 100%);
					border-radius: 0px 32px 0px 32px;
					font-size: 22px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
				}


				.period {
					margin-top: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 112px;
					height: 36px;
					background: linear-gradient(180deg, #000000 0%, #000000 100%);
					border-radius: 4px;
					border: 1px solid;
					font-size: 24px;
					font-family: MicrosoftYaHei;
					color: #CDC0B0;
				}

				.gainsDate {
					margin-top: 40px;
					color: rgba(205, 192, 176, 1);
					font-size: 24px;

					.date {
						color: rgba(148, 122, 82, 1);
					}
				}

				.schedule {
					position: absolute;
					right: 5%;
					bottom: 32px;
					width: 46%;

					::v-deep.van-progress__portion {
						background: linear-gradient(90deg, #D7D0BB 0%, #FFF9EF 28%, #FFF9EF 34%, #FFD18A 100%);
					}
				}

				// 完成状态
				&.Issued {
					box-shadow: 0px 0px 0px white;

					.topText {
						background: linear-gradient(90deg, #F7B500 0%, rgba(247, 181, 0, 0) 100%);
						color: #121317;
					}

					.gainsDate {
						color: rgba(205, 192, 176, 0.5);

						.date {
							color: rgba(205, 192, 176, 0.5);
						}
					}
				}
			}
		}
	}
</style>